<template>
	<view class="page-body">

		<view class="top2">
			<view style="display: flex;align-items: center;">
				<el-avatar style="margin-right: 20rpx;" :size="60"
					src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
				</el-avatar>
				<view style="display: flex;flex-direction: column;margin-top: 20rpx;">
					<h4 class="ele-elip">您好，{{vk.vuex.get('$user.userInfo.nickname')}}，开始您一天的工作吧！</h4>
					<text
						style="color: #999999;font-size: 12px;margin-top: 15rpx;">{{baseData.wea||'正在获取今日天气......'}}</text>
				</view>

			</view>

		</view>

		<!-- 顶部数据总览 -->
		<view class="el_top_row1">

			<transition name="zoom" mode="out-in">
				<home-top-item v-if="show" ref="order3" unit="元" time="日" title="订单交易额" summary="历史交易总额"
					:today="vk.pubfn.priceFilter(baseData.t_g_money)" :yesterday="vk.pubfn.priceFilter(baseData.y_g_money)" :total="vk.pubfn.priceFilter(baseData.a_g_money)">
				</home-top-item>
			</transition>

			<!-- 客户订单数 -->
			<transition name="zoom" mode="out-in">
				<home-top-item v-if="show" ref="order1" title="成交订单数" :today="baseData.t_c_order"
					:yesterday="baseData.y_c_order" summary="成交订单总数" :total="baseData.a_c_order" unit="单">
				</home-top-item>
			</transition>

			<!-- 发货订单数 -->
			<transition name="zoom" mode="out-in">
				<home-top-item v-if="show" ref="order2" title="下单用户数" :today="baseData.t_s_order"
					:yesterday="baseData.y_s_order" summary="下单用户总数" :total="baseData.a_s_order" unit="位">
				</home-top-item>
			</transition>
			<!-- 收益 -->
			<transition name="zoom" mode="out-in">
				<home-top-item style="margin-right: 0rpx;" v-if="show" ref="order4" unit="位" time="日" title="今日用户量"
					summary="总用户量" :today="baseData.t_d_user" :yesterday="baseData.y_d_user" :total="baseData.a_g_user">
				</home-top-item>
			</transition>

			<!-- 用户数量及平台余额 -->

		</view>

		<view class="el_top_row2">
			<view class="jump_bg">
				<view class="jump_item jump_item_left" @click="jumpTo(1)">
					<el-badge :value="baseData.num1" class="item" :hidden="baseData.num1==0">
						<i class="icon el-icon-sell" style="color: rgb(255, 192, 105)"></i>
					</el-badge>
					<view class="text">点播课程</view>
				</view>
				<view class="jump_item" @click="jumpTo(2)">
					<el-badge :value="baseData.num2" class="item" :hidden="baseData.num2==0">
						<i class="icon el-icon-box" style="color: rgb(255, 133, 192)"></i>
					</el-badge>
					<view class="text">直播课程</view>
				</view>
			</view>
			<view class="jump_bg">
				<view class="jump_item jump_item_left" @click="jumpTo(3)">
					<el-badge :value="baseData.num3" class="item" :hidden="baseData.num3==0">
						<i class="icon el-icon-sold-out" style="color: rgb(92, 219, 211)"></i>
					</el-badge>
					<view class="text">广场管理</view>
				</view>
				<view class="jump_item" @click="jumpTo(4)">
					<el-badge :value="baseData.num4" class="item" :hidden="baseData.num4==0">
						<i class="icon el-icon-document-delete" style="color: rgb(255, 214, 102)"></i>
					</el-badge>
					<view class="text">师资力量</view>
				</view>
			</view>
			<view class="jump_bg">

				<view class="jump_item jump_item_left" @click="jumpTo(5)">
					<i class="icon el-icon-finished" style="color: rgb(179, 127, 235)"></i>
					<view class="text">新闻资讯</view>
				</view>

				<view class="jump_item" @click="jumpTo(6)">
					<i class="icon el-icon-coin" style="color: rgb(255, 156, 110)"></i>
					<view class="text">财务订单</view>
				</view>
			</view>
			<view class="jump_bg jump_bg_right">
				<view class="jump_item jump_item_left" @click="jumpTo(7)">
					<i class="icon el-icon-s-custom" style="color: rgb(149, 222, 100)"></i>
					<view class="text">题库管理</view>
				</view>
				<view class="jump_item" @click="jumpTo(8)">
					<i class="icon el-icon-money" style="color: rgb(105, 192, 255)"></i>
					<view class="text">客户管理</view>
				</view>
			</view>
		</view>

		<!-- 柱状折线图 -->
		<view class="el_top_row3">
			<view class="title">
				<span class="left_text">订单金额与订单数量统计</span>
				<view class="right_switch">
	
					<vk-data-input-date-time v-model="time" type="daterange" size="small"></vk-data-input-date-time>

					<el-tag type="info" size="medium" v-if="cur != 'week'" @click="getChart('week')">本周</el-tag>
					<el-tag type="success" size="medium" v-if="cur == 'week'">本周</el-tag>

					<el-tag type="info" size="medium" v-if="cur != 'month'" @click="getChart('month')">本月</el-tag>
					<el-tag type="success" size="medium" v-if="cur == 'month'">本月</el-tag>

					<el-tag type="info" size="medium" v-if="cur != 'year'" @click="getChart('year')">今年</el-tag>
					<el-tag type="success" size="medium" v-if="cur == 'year'">今年</el-tag>
				</view>
			</view>
			<view class="charts-box">
				<money-chart :chartD="chartData" ref="chart"></money-chart>
			</view>
		</view>





		<view class="el_top_row3">
			<view class="title">
				<span class="left_text">用户量</span>
				<view class="right_switch">
					
					<vk-data-input-date-time v-model="time2" type="daterange" size="small"></vk-data-input-date-time>

					<el-tag type="info" size="medium" v-if="cur2 != 'week'" @click="getChart2('week')">本周</el-tag>
					<el-tag type="success" size="medium" v-if="cur2 == 'week'">本周</el-tag>

					<el-tag type="info" size="medium" v-if="cur2 != 'month'" @click="getChart2('month')">本月</el-tag>
					<el-tag type="success" size="medium" v-if="cur2 == 'month'">本月</el-tag>

					<el-tag type="info" size="medium" v-if="cur2 != 'year'" @click="getChart2('year')">今年</el-tag>
					<el-tag type="success" size="medium" v-if="cur2 == 'year'">今年</el-tag>
				</view>
			</view>
			<view class="charts-box">
				<order-chart :chartD="chartData2" ref="chart2"></order-chart>
			</view>
		</view>
		<!-- 回款记录图表 -->
		<!-- <view class="bottom_chart_bg">
			<view class="left_line">
				<view class="title">订单回款金额记录</view>
				<money-back-line :chartD="chartData2" ref="chart2" />
			</view>
			<view class="right_pie">
				<view class="title">订单回款金额占比</view>
				<money-back-pie :chartD="chartData3" ref="chart3" />
			</view>
		</view> -->
	</view>
</template>

<script>
	var that // 当前页面对象
	var vk = uni.vk // vk实例

	export default {
		watch: {
			time(value) {
				console.log(value)
				if (value) {
					this.cur = 'custom'
					this.getChart("custom")
				} else {
					this.getChart("week")
				}
			},
			time2(value) {
				console.log(value)
				if (value) {
					this.cur = 'custom'
					this.getChart2("custom")
				} else {
					this.getChart2("week")
				}
			}
		},

		data() {
			// 页面数据变量
			return {
				// 基本信息
				show: true,
				time: [],
				is_dk: {
					type: 1,
					is_punch: false
				},
				time2: [],
				sale_id: '',
				sale_id2: '',
				sale_list: [],
				baseData: {
					// 总览
					wea: '',
					total_user: 0,
					t_c_order: 0,
					y_c_order: 0,
					a_c_order: 0,
					t_s_order: 0,
					y_s_order: 0,
					a_s_order: 0,
					t_g_money: 0,
					y_g_money: 0,
					a_g_money: 0,
					t_g_user: 0,
					y_g_user: 0,
					a_g_user: 0,
					plant_total: 0,
					account: 0,
					num1: 0,
					num2: 0,
					num3: 0,
					num4: 0
				},
				// 发货订单图表
				cur: 'week',
				cur2: 'week',
				chartData: {
					categories: [],
					series: []
				},
				// 回款图表
				chartData2: {
					categories: [],
					series: []
				},
				chartData3: [],
				// 跳转地址
				jumpArr: [
					'/uni_modules/uce-video-course/pages/course/list',
					'/uni_modules/uce-video-course/pages/live_course/list',
					'/uni_modules/uce-bbs/pages/article/list',
					'/uni_modules/uce-teacher/pages/list',
					'/uni_modules/uce-article/pages/article/list',
					'/uni_modules/uce-order/pages/order/list',
					'/uni_modules/uce-exam/pages/q_bank/list',
					'/pages_plugs/system/user-list/list'
				]
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this
			vk = that.vk
			that.init(options)
		},

		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.getBaseInfo()
				this.getChart('year')
				this.getChart2('year')
			},
			
			//
			// 获取基本信息
			getBaseInfo() {
				vk.callFunction({
					url: 'admin/index/sys/base_data',
					title: '数据加载中...',
					success(res) {
						// 金额处理
						res.data.t_g_money = res.data.t_g_money
						res.data.y_g_money = res.data.y_g_money
						res.data.a_g_money = res.data.a_g_money
						res.data.plant_total = res.data.plant_total
						res.data.account = res.data.account
						// 赋值
						that.baseData = res.data
						// 图表
						// that.setMoneyBack(res.chartData)
						// that.setPie(res.pieData)
						that.$nextTick(function() {
							that.show = false

							setTimeout(function() {
								that.show = true
							}, 0.000001)

						})


					}
				})
			

				
			},
			// 回款图表
			setMoneyBack(cData) {
				cData.map(v => {
					this.chartData2.categories.push(v._id)
					this.chartData2.series.push(v.sum / 100)
				})
				this.$refs.chart2.drawLine()
			},
			setPie(pData) {
				pData.map(v => {
					this.chartData3.push({
						value: v.sum / 100,
						name: v._id
					})
				})
				this.$refs.chart3.drawLine()
			},
			// 获取订单图表
			getChart(type) {
				this.cur = type
				let time = this.time
				console.log(this.sale_id)
				let sale_id = this.sale_id
				vk.callFunction({
					url: 'admin/system/user/sys/getChartsList',
					title: '',
					data: {
						type,
						time,
						sale_id
					},
					success(res) {
						that.setCharts(res)
					}
				})
			},

			// 获取订单图表
			getChart2(type) {
				this.cur2 = type
				let time = this.time2
				console.log(this.sale_id)
				let sale_id = this.sale_id2
				vk.callFunction({
					url: 'admin/system/user/sys/getChartsList2',
					title: '',
					data: {
						type,
						time,
						sale_id
					},
					success(res) {
						that.setCharts2(res)
					}
				})
			},




			// 设置图表
			setCharts(res) {
				let categories = []
				let data = []
				let data2 = []
				res.data.arr1.map(v => {
					categories.push(v._id)
					data.push(v.count)
				})
				res.data.arr2.map(v => {
					data2.push(v.count/100)
				})

				that.chartData = {
					categories,
					money: data2,
					num: data
				}
				that.$nextTick(() => {

					that.$refs.chart.drawLine()
				})
			},

			// 设置图表
			setCharts2(res) {
				let categories = []
				let data = []
				let data2 = []
				res.data.arr1.map(v => {
					categories.push(v._id)
					data.push(v.count)
				})
				res.data.arr2.map(v => {
					data2.push(v.count)
				})

				that.chartData2 = {
					categories,
					money: data2,
					num: data
				}
				that.$nextTick(() => {

					that.$refs.chart2.drawLine()
				})
			},
			// 跳转
			jumpTo(num) {
				vk.navigateTo(this.jumpArr[num - 1]);
			},
			onChange(type) {
				console.log("ass")
				if (type == 1)
					this.getChart(this.cur)
				else
					this.getChart2(this.cur2)
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: rgba(0, 0, 0, 0);
		padding: 0 10px !important;
	}

	.ele-elip {
		overflow: hidden;
		white-space: nowrap;
		word-break: break-all;
		text-overflow: ellipsis;
	}

	.top2 {


		padding: 20rpx;
		height: 150rpx;
		margin-bottom: 40rpx;
		background: #fff;
		border-radius: 8px;

	}


	.page-body {
		padding: 0 !important;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}

	.el_top_row1 {
		width: 100%;
		height: 30%;
		display: flex;
		flex-direction: row;
		position: relative;
		flex-wrap: wrap;

		.top-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.el_item {
				display: flex;
				border-radius: 8px;
				background: #ffffff;
				height: 30%;
				align-items: center;
				padding: 0 20px;

				.text {
					font-size: 16px;
					color: #666;
					margin-right: 20px;
				}

				.el_item_num {
					font-size: 24px;
				}
			}
		}
	}

	.el_top_row2 {
		margin-top: 20px;
		display: flex;

		.jump_bg {
			flex: 1;
			margin-right: 20px;
			display: flex;
			justify-content: space-between;

			.jump_item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 12px 16px;
				border-radius: 8px;
				background-color: #FFFFFF;
				cursor: pointer;
				transition: all 0.2s cubic-bezier(.02, .01, .47, 1);

				.icon {
					font-size: 26px;
				}

				.text {
					font-size: 14px;
					margin-top: 8px;
					color: #666;
				}
			}

			.jump_item:hover {
				box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.1);
				transform: translate(0, -5px);
			}

			.jump_item_left {
				margin-right: 20px !important;
			}
		}

		.jump_bg_right {
			flex: 1;
			margin-right: 0;
		}
	}

	.el_top_row3 {
		width: 100%;
		background: #fff;
		border-radius: 8px;
		margin-top: 20px;
		padding: 16px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			border-bottom: 1px solid #e8eaec;

			.left_text {
				font-size: 14px;
				color: #333;
				font-weight: bold;
				padding: 0 16px 16px;
			}

			.right_switch {
				padding: 0 16px 16px;

				.el-tag {
					margin: 0 6px;
					padding: 0 10px;
					cursor: pointer;
				}
			}
		}

		.charts-box {
			margin-top: 20px;
			position: relative;
		}
	}

	.bottom_chart_bg {
		display: flex;
		margin-top: 20px;
		justify-content: space-between;
		margin-bottom: 20px;

		.left_line {
			background-color: #ffffff;
			font-size: 14px;
			flex: 1;
			border-radius: 8px;

			.title {
				padding: 16px;
				border-bottom: 1px solid #e8eaec;
				margin-bottom: 20px;
			}
		}

		.right_pie {
			width: 30%;
			background-color: #ffffff;
			font-size: 14px;
			margin-left: 20px;
			border-radius: 8px;
			position: relative;
			z-index: 99;

			.title {
				padding: 16px;
				border-bottom: 1px solid #e8eaec;
				margin-bottom: 12px;
			}
		}
	}
</style>
